<template>
	<Container>
		<view class="header">
			<view class="article" v-if="!isStart && articleIsShow">
				<view v-for="(item, index) in assignment.optionArticles[current]" :key="index"><image class="img" :src="item.imageUrl" mode="aspectFit"></image></view>
			</view>
			<view class="article" v-if="isStart && articleIsShow">
				<view><image class="img" :src="questionTextUrl" mode="aspectFit"></image></view>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
		<Record :top="75" ref="audio" @recordFinish="recordFinish" :isStart="!isStart" :answerText="[answerText]" :typeCode="assignment.typeCode" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Record from '../record.vue'
export default {
	data() {
		return {
			current: 0,
			isStart: false,
			articleIsShow: true,
			audioUrl: ''
		}
	},
	mixins: [mixins],
	components: { AudioIcon, Question, Container, Record },
	watch: {
		questionPress: function(bool) {
			if (!bool) {
				if (this.isStart) {
					this.articlesQuestionAudio()
					return
				}
				this.current = 0
				this.articlesAudio()
			}
		}
	},
	computed: {
		answerText() {
			return this.assignment.optionArticles[this.current].filter(item => {
				return item.mark === 'answer'
			})[0].name
		},
		questionTextUrl() {
			return this.assignment.optionArticles[this.current].filter(item => {
				return item.mark === 'question'
			})[0].imageUrl
		},
		questionText() {
			return this.assignment.optionArticles[this.current].filter(item => {
				return item.mark === 'question'
			})[0].name
		}
	},
	methods: {
		articlesAudio: async function() {
			const question = await this.parseTextAudio({
				text: this.questionText
			})
			const answer = await this.parseTextAudio({
				text: this.answerText
			})
			this.dialogueAudio({
				src: question,
				end: () => {
					setTimeout(() => {
						this.dialogueAudio({
							src: answer,
							end: () => {
								if (this.current === this.assignment.optionArticles.length - 1) {
									this.current = 0
									this.guideAudio()
									return
								}
								const timer = setTimeout(() => {
									this.current++
									this.articlesAudio()
									this.articleIsShow = false
									setTimeout(() => {
										this.articleIsShow = true
									}, 0)
								}, 1500)
								this.$once('hook:beforeDestory', function() {
									clearTimeout(timer)
								})
							}
						})
					}, 500)
				}
			})
		},
		guideAudio: async function() {
			const guide = await this.parseTextAudio({
				text: '接下来，请答题'
			})
			this.dialogueAudio({
				src: guide,
				end: () => {
					setTimeout(() => {
						this.articlesQuestionAudio()
						this.isStart = true
					}, 500)
				}
			})
		},
		articlesQuestionAudio: async function() {
			const data = await this.parseTextAudio({
				text: this.questionText
			})
			this.dialogueAudio({
				src: data,
				end: () => {
					this.$refs.audio.initStatus()
				}
			})
		},
		recordFinish: function(audioData) {
			this.choosesKey.push(audioData.isAudioWithTexts)
			this.audioUrl = this.audioUrl ? this.audioUrl + ',' + audioData.audioUrl : this.audioUrl + audioData.audioUrl
			if (this.current === this.assignment.optionArticles.length - 1) {
				const bool = this.choosesKey.every(item => {
					return item
				})
				this.$parent.next({
					isSure: bool,
					audioUrl: this.audioUrl
				})
				return
			}
			const timer = setTimeout(() => {
				this.current++
				this.articleIsShow = false
				setTimeout(() => {
					this.articleIsShow = true
				}, 0)
				this.articlesQuestionAudio()
			}, 1500)
			this.$once('hook:beforeDestory', function() {
				clearTimeout(timer)
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 50vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	position relative
	.article
		width 100%
		height 100%
		display flex
		align-items center
		justify-content center
		flex-direction column
		animation outIn 0.4s
		view
			width 70%
			height 50%
			display flex
			align-items center
			justify-content center
			image
				width 80%
				height 80%
</style>
